<template>
  <div class="index">
    <mt-header style="background-color: #ff4d4f;color:#fff" fixed title="兑换记录">
      <router-link to="/jpList" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="main">
      <div class="list" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
        <mt-loadmore class="loadmore" style="height:100%" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="isAutoFill">
          <div style="height:100%;">
            <ul>
              <li class="liHeader">
                <p><span class="left">奖品名称</span><span class="con">兑换时间</span></p>
              </li>
              <li class="li" v-for="(item,index) in list" :key="index">
                <p><span class="left">{{item.PrizeName}}</span><span class="con">{{item.Created}}</span></p>
              </li>
            </ul>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../utils/http.js";
import { Swiper, Slide } from "vue-swiper-component";
export default {
  name: "index",
  data() {
    return {
      PageIndex: 1,
      PageSize: 10,
      list: [],
      PageTotal: 0,
      allLoaded: false,
      isAutoFill: false,
      wrapperHeight: 0
    };
  },
  methods: {
    loadTop() {
      this.PageIndex = 1;
      this.get_list();
    },
    loadBottom() {
      this.loadMore();
    },
    loadMore() {
      if (this.PageIndex > this.PageTotal) {
        Toast("已经到底了");
        this.$refs.loadmore.onBottomLoaded();
      } else {
        https({
          method: "post",
          url: "/api/v1/Prizes/SignedGetPage",
          data: {
            PageIndex: this.PageIndex,
            PageSize: this.PageSize
          }
        })
          .then(res => {
            if (res.Code == 200) {
              this.list = this.list.concat(res.Data.RecordList);
              this.PageIndex++;
              this.$refs.loadmore.onBottomLoaded();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    get_list() {
      https({
        method: "post",
        url: "/api/v1/Prizes/SignedGetPage",
        data: {
          PageIndex: this.PageIndex,
          PageSize: this.PageSize
        }
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            this.list = res.Data.RecordList;
            this.allLoaded = false;
            this.PageIndex = res.Data.PageIndex;
            this.PageTotal = res.Data.PageTotal;
            this.PageIndex = 2;
            this.$refs.loadmore.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    list_detal(row) {
      console.log(row);
      // this.$router.push({ path: '/activity', query: { id: row } })
      this.$router.push({ path: "/jpListDetail" });
    }
  },
  mounted: function() {
    this.get_list();
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top;
  },
  created() {}
};
</script>

<style lang="less" scoped>
.main::-webkit-scrollbar {
  display: none;
}
.list {
  height: 100%;
  margin-top: 40px;
}
.jpHeader {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  position: fixed;

  p {
    font-size: 1.2rem;
    span {
      color: #ff4d4f;
    }

    .mint-button--small {
      float: right;
      margin-top: 0.5rem;
    }
  }
}
.main {
  width: 100%;
  // overflow: scroll;
  ul {
    width: 100%;
    margin-bottom: 0;
    padding: 0;
    .li {
      list-style: none;
      width: 100%;
      height: 3rem;
      background: #fff;
      margin-top: 1px;
      p {
        font-size: 1rem;
        padding: 0 1rem;
        box-sizing: border-box;
        line-height: 3rem;
        .left {
          display: inline-block;
          width: 50%;
          text-align: center;
        }
        .con {
          display: inline-block;
          width: 50%;
          text-align: center;
        }
      }
    }
    .liHeader {
      list-style: none;
      width: 100%;
      height: 3rem;
      background: #fff;
      margin-top: 1px;
      p {
        font-size: 1rem;
        padding: 0 1rem;
        box-sizing: border-box;
        line-height: 3rem;
        .left {
          display: inline-block;
          width: 50%;
          text-align: center;
        }
        .con {
          display: inline-block;
          width: 50%;
          text-align: center;
        }
      }
    }
  }
}
</style>